<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载实现</title>
    <!-- <link href="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" rel="preload" as="image" type="image/png"> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100vw;
            height: 100vh;
            object-fit: cover;
            display: block;
        }

        ::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <img data-origin="https://t7.baidu.com/it/u=3930750564,2979238085&fm=193" alt="">
    <script>
        const images = document.querySelectorAll('img')
        let observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.src = entry.target.dataset.origin
                    observer.unobserve(entry.target)
                }
            })
        }, {
            rootMargin: '0px 0px 200px 0px'
        })
        images.forEach(image => observer.observe(image))
    </script>
</body>

</html>